<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>美团</title>
</head>
<body>
    <div class="headbar">
        <ul class="headbar-left">
            <span><img src="./image/lo.jpeg" alt="" class="lo" ></span>
            <li style="color: #929292;">北京</li>
            <li style="color: #929292; border: #7a7979 solid 1px;">切换城市</li>
            <span>[</span>
            <li>门头沟区</li>
            <li>大厂回族自治区</li>
            <li>廊坊</li>
            <span>]</span>
            <ol class="login">
                <li>
                    <a href="#" style="color: #fcbe7d; padding-right: 10px;">立即登录</a>
                </li>
                <li>
                    <a href="#" style="color: #bbbbbb;">注册</a>
                </li>
            </ol>
            
        </ul>
        <ul class="headbar-right">
            <li><a href="#">我的美团</a></li>
            <li><a href="#">手机APP</a></li>
            <li><a href="#">商家中心</a></li>
            <li><a href="#">美团规则</a></li>
            <li><a href="#">网站导航</a></li>
        </ul>
    </div>
    <div class="search">
        <img src="./image/logo.png" alt="" class="logo">
        <div class="searchbar">
            <form action="">
                <input type="text" value="搜索商家或地点" class="frame">
                <input type="submit" value="" class="submit">
                <img src="./image/search.png" alt="" >
            </form>
        </div>
        <div class="navigation-up">
            <li><a href="">美团外卖</a></li>
            <li><a href="">猫眼电影</a></li>
            <li><a href="">美团酒店</a></li>
            <li><a href="">民宿/公寓</a></li>
            <li><a href="">商家入驻</a></li>
            <li><a href="">美团公益</a></li>
        </div>
    </div>
    <div class="content">
        <div class="navigation">
            <span>全部分类</span>
            <div>
                <li><a href="">美食</a></li>
                <li><a href="">外卖</a></li>
                <li><a href="">酒店</a></li>
                <li><a href="">民宿</a></li>
                <li><a href="">猫眼电影</a></li>
                <li><a href="">机票<span>/</span>火车票</a></li>
                <li><a href="">休闲娱乐/KTV</a></li>
                <li><a href="">生活服务</a></li>
                <li><a href="">丽人/美发/医学美容</a></li>
                <li><a href="">结婚/婚纱摄影/婚宴</a></li>
                <li><a href="">亲子/儿童乐园/幼教</a></li>
                <li><a href="">运动健身/建设中心</a></li>
                <li><a href="">家装/建材/家居</a></li>
                <li><a href="">学习培训/音乐培训</a></li>
                <li><a href="">医疗健康/宠物/爱车</a></li>
                <li><a href="">酒吧/密室逃脱</a></li>
            </div>
            
        </div>
        <div class="test">
            <div class="test-up">
                <img src="./image/banner.jpeg" alt="" style="width: 550px;height: 240px;">
                <img src="./image/life.jpeg" alt="" class="main-" style="width: 150px;height: 240px;">
                <div class="login-down">
                    <img src="./image/avatar.jpeg" alt="">
                    <span style="margin-top: 10px; display: block">Hi!&#160 你好</span>
                    <div style="margin-top: 10px;">
                        <a href="">注册</a>
                        <a href="">登录</a>
                    </div>
                   
                </div>
            </div>
            <div class="test-down">
                <img src="./image/hotel.png" alt="">
                <img src="./image/other.jpeg" alt="">
                <img src="./image/company.jpeg" alt="">
                <div class="erweima">
                    <img src="./image/erweima.png" alt="">
                    <span>美团APP手机版</span>
                    <br>
                    <span style="color: #ff4616;font-size:13px;">1元起</span>
                    <span style="font-size:13px;">吃喝玩乐</span>
                </div>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">美食</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">外卖</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">酒店</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">民宿</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">猫眼电影</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">机票</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
            <div>
                <span class="left">火车票</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>火锅</span>
                <span>炒菜</span>
                <span>麻辣烫</span>
            </div>
        </div>
        <div class="active">
            <div>
                <span class="left">休闲娱乐</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>啤酒</span>
                <span>饮料</span>
                <span>八宝粥</span>
            </div>
            <div>
                <span class="left">KTV</span>
                <span class="right">更多</span>
            </div>
            <div class="subscript" style="border: none;">
                <span>火锅</span>
                <span>炒菜</span>
                <span>麻辣烫</span>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>